import {
    RotateLeftOutlined,
    RotateRightOutlined,
    SwapOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
    DeleteOutlined
} from '@ant-design/icons';
import { Image, Space } from "antd";
import { useState, useEffect } from "react";
import { useStore } from "../store";
import AddImg from './AddImg';
import '../assets/ImgCard.css'

function ImgCard() {
    const store = useStore();
    const [imglist, setImglist] = useState([]);


    useEffect(() => {
        const updateSlide = async () => {
            console.log(imglist);
            const imglist1 = JSON.parse(sessionStorage.getItem('imgList'));
            setImglist(imglist1)
        };
        updateSlide();

    }, [store.UploadImgStore.getImgListLength]);

    const onDelete = (index) => {
        console.log(index)
        store.UploadImgStore.deleteImg(index);
    };

    return (
        <>
            <div style={{ display: 'flex', 'flex-wrap': ' wrap', 'justify-content': 'space-between' }}>
                <div style={{ float: 'left', height: '280px', width: '320px', textAlign: 'center', verticalAlign:'center' }}>
                    <AddImg />
                </div>
                {/* <div style={{ display: 'flex', 'flex-wrap': ' wrap', 'justify-content': 'space-between' }}> */}
                {imglist ? imglist.map((value, index) => {
                    console.log(value);
                    return (
                        <div key={index} style={{ display: 'flex', width: '320px', height: '280px', overflow: 'hidden', marginBottom: '1.875rem', borderRadius: '8px' }}>
                                <Image
                                    width={200}
                                    src={value.fileObj}
                                    style={{ width: '320px', height: '280px', objectFit: 'cover' }}
                                preview={{
                                        toolbarRender: (
                                            _,
                                            {
                                                transform: { scale },
                                                actions: { onFlipY, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },
                                            },
                                        ) => (
                                            <Space size={12} className="toolbar-wrapper">
                                                <SwapOutlined rotate={90} onClick={onFlipY} />
                                                <DeleteOutlined onClick={onDelete(index)} />
                                                <RotateLeftOutlined onClick={onRotateLeft} />
                                                <RotateRightOutlined onClick={onRotateRight} />
                                                <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
                                                <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
                                            </Space>
                                        ),
                                    }}
                                />
                        </div>
                    )
                }) : ''}
                {/* </div> */}
            </div>
        </>
    )
}

export default ImgCard;